<template>
    <div id="map-panel">
        <el-row class="tool-bar">
            <el-button icon="el-icon-search" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'Main',
    props: {},
    mounted() {
        this.mti = window.mti
        this.map = this.mti.map("map-panel", {
            center: [121.4824955836, 31.217032255],
            controls:[],
            zoom: 13
        });
        const baseMap = this.mti.aMap({
            id: "base-map"
        });
        this.mti.addLayer(baseMap, this.map);
    }
}
</script>

<style>
    html, body, #map-panel {
        width: 100%;
        height: 100%;
        position: absolute;
        margin: 0;
        padding: 0;
    }
    .tool-bar{
        position: absolute;
        left: 5px;
        top: 5px;
        z-index: 5;
    }
</style>
